<template>
    <label
        class="a-label c-f-h c-f-s-center"
        :class="[
            `color-${myColor}`,
            `size-${mySize}`,
            { sharp: mySharp },
            square ? `c-square-${mySize}` : '',
            { 'c-w-100': block },
            {
                plain:
                    plain ?? formItem?.labelPlain ?? form?.labelPlain ?? false,
            },
            alignClassName,
        ]"
        :style="[
            form?.myLabelWidth != null
                ? `width: ${form.myLabelWidth}px; box-sizing: border-box;`
                : '',
        ]"
    >
        <slot></slot>
    </label>
</template>

<style lang="scss" scoped>
@import "../scss/vars";

.a-label {
    @each $colorPackageName, $colorPackageValue in $colorPackages {
        $frontColor: map-get($colorPackageValue, "frontColor");
        $bgColor: map-get($colorPackageValue, "bgColor");
        &.color-#{$colorPackageName} {
            &:not(.plain) {
                color: $frontColor;
                background-color: $bgColor;
            }
            &.plain {
                color: $bgColor;
                background-color: transparent;
            }
        }
    }

    @each $sizePackageName, $sizePackageValue in $sizePackages {
        &.size-#{$sizePackageName} {
            &:not(.c-square-#{$sizePackageName}) {
                &:not(.plain) {
                    padding-left: map-get($sizePackageValue, "space");
                }
                padding-right: map-get($sizePackageValue, "space");
                height: map-get($sizePackageValue, "size");
            }

            font-size: map-get($sizePackageValue, "fontSize");
            &:not(.sharp) {
                border-radius: map-get($sizePackageValue, "borderRadius");
            }
        }
    }
}
</style>

<script>
import formItemMixin from "../mixins/formItemMixin"

export default {
    name: 'ALabel',
    mixins: [formItemMixin],
    props: {
        square: {
            type: Boolean,
            default: false,
        },
        block: {
            type: Boolean,
            default: false,
        },
        plain: {
            type: Boolean,
            default: null,
        },
        align: {
            type: String,
            default: 'left',
        },
    },
    data() {
        return {
            displayWidth: null
        }
    },
    computed: {
        alignClassName() {
            if (this.form?.labelAlign == 'left') {
                return 'c-f-p-start'
            } else if (this.form?.labelAlign == 'right') {
                return 'c-f-p-end'
            }
            return ''
        }
    },
    mounted() {
        if (this.form?.autoAlignLabel) {
            this.reportMyWidth()
        }
    },
    methods: {
        reportMyWidth() {
            this.$el.style.removeProperty('width')
            this.$nextTick(() => {
                this.form?.addLabelWidth(this.keyForFormItem, this.$el.clientWidth)
            })
        },
    },
    unmounted() {
        this.form?.removeLabelWidth(this.keyForFormItem)
    },
}
</script>